<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>管理员后台页面</title>
    <!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->

    <script src="../js/jquery-3.3.1.min.js"></script>

    <script src="../js/jquery.md5.js"></script>
    <!-- Bootstrap -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <script>

        function ajaxForDayList(num){
            $.get("/report/manager/getAttendanceByDate", {date: $("#choice_date").val(), num: num}, function (PageAndList) {
                var html = "<table id=\"date_table\" class=\"table table-hover\" style=\"margin-top: 10px\">";
                html += "<tr>\n" +
                    "                        <th>#</th>\n" +
                    "                        <th>工号</th>\n" +
                    "                        <th>姓名</th>\n" +
                    "                        <th>出勤时间</th>\n" +
                    "                    </tr>";

                var index = 1;
                for(var item in PageAndList.list){
                    html += "<tr>\n" +
                        "                        <td>"+ index +"</td>\n" +
                        "                        <td>" + PageAndList.list[item].id +"</td>\n" +
                        "                        <td>" + PageAndList.list[item].name +"</td>\n" +
                        "                        <td>" + PageAndList.list[item].time + "</td>\n" +
                        "                    </tr>";
                    index++;
                }
                html += "</table>";
                $("#date_table_div").html(html);

                //总条数
                var total = PageAndList.page.total;
                //每页显示的数量
                var size = PageAndList.page.size;
                //当前页
                var currentPage = PageAndList.page.index;
                //总页数
                var totalPage = Math.ceil(total / size);

                //拼接分页按钮的html
                //上一页按钮
                if(currentPage <= 1){
                    html = "<li>\n" +
                        "            <a href=\"#\" aria-label=\"Previous\">\n" +
                        "                <span aria-hidden=\"true\">&laquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>";
                }else{
                    var prePage = currentPage - 1;
                    html = "<li>\n" +
                        "            <a href=\"javascript:void(0)\" onclick='ajaxForDayList("+ prePage +")' aria-label=\"Previous\">\n" +
                        "                <span aria-hidden=\"true\">&laquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }

                //中间按钮，前5后4
                //定义开始位置begin，结束位置end
                var begin;
                var end;

                //要显示10页码
                if(totalPage < 10){
                    //不够10页
                    begin = 1;
                    end = totalPage;
                }else{
                    //页码超过10页
                    begin = currentPage - 5;
                    end = currentPage + 4;

                    //补齐
                    //前面不够5个
                    if(begin < 1){
                        begin = 1;
                        end = begin + 9;
                    }
                    //后面不够4个
                    if(end > totalPage){
                        end = totalPage;
                        begin = end - 9;
                    }

                }

                //中间按钮
                for(var i = begin; i <= end; i++){
                    if(i === currentPage){
                        html += "<li class=\"active\"><a href=\"javascript:void(0)\" onclick='ajaxForDayList("+ i +")'>" + i + "</a></li>";
                    }else{
                        html += "<li><a href=\"javascript:void(0)\" onclick='ajaxForDayList("+ i +")'>" + i + "</a></li>";
                    }
                }

                //下一页按钮
                if(currentPage >= totalPage){
                    html += "<li>\n" +
                        "            <a href=\"#\" aria-label=\"Next\">\n" +
                        "                <span aria-hidden=\"true\">&raquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }else {
                    var nextPage = currentPage + 1;
                    html += "<li>\n" +
                        "            <a href=\"javascript:void(0)\" onclick='ajaxForDayList("+ nextPage +")' aria-label=\"Next\">\n" +
                        "                <span aria-hidden=\"true\">&raquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }

                $("#page_day").html(html);
            });
        }

        function ajaxForNoattendance(num){
            $.get("/report/manager/getUnattendanceByDate", {date: $("#choice_date").val(), num: num}, function (PageAndList) {
                var html = "<table id=\"date_table\" class=\"table table-hover\" style=\"margin-top: 10px\">";
                html += "<tr>\n" +
                    "                        <th>#</th>\n" +
                    "                        <th>工号</th>\n" +
                    "                        <th>姓名</th>\n" +
                    "                        <th>考勤时间</th>\n" +
                    "                    </tr>";

                var index = 1;
                for(var item in PageAndList.list){
                    html += "<tr>\n" +
                        "                        <td>"+ index +"</td>\n" +
                        "                        <td>" + PageAndList.list[item].id +"</td>\n" +
                        "                        <td>" + PageAndList.list[item].name +"</td>\n" +
                        "                        <td>" + "未考勤" + "</td>\n" +
                        "                    </tr>";
                    index++;
                }
                html += "</table>";
                $("#date_table_div").html(html);

                //总条数
                var total = PageAndList.page.total;
                //每页显示的数量
                var size = PageAndList.page.size;
                //当前页
                var currentPage = PageAndList.page.index;
                //总页数
                var totalPage = Math.ceil(total / size);

                //拼接分页按钮的html
                //上一页按钮
                if(currentPage <= 1){
                    html = "<li>\n" +
                        "            <a href=\"#\" aria-label=\"Previous\">\n" +
                        "                <span aria-hidden=\"true\">&laquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>";
                }else{
                    var prePage = currentPage - 1;
                    html = "<li>\n" +
                        "            <a href=\"javascript:void(0)\" onclick='ajaxForNoattendance("+ prePage +")' aria-label=\"Previous\">\n" +
                        "                <span aria-hidden=\"true\">&laquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }

                //中间按钮，前5后4
                //定义开始位置begin，结束位置end
                var begin;
                var end;

                //要显示10页码
                if(totalPage < 10){
                    //不够10页
                    begin = 1;
                    end = totalPage;
                }else{
                    //页码超过10页
                    begin = currentPage - 5;
                    end = currentPage + 4;

                    //补齐
                    //前面不够5个
                    if(begin < 1){
                        begin = 1;
                        end = begin + 9;
                    }
                    //后面不够4个
                    if(end > totalPage){
                        end = totalPage;
                        begin = end - 9;
                    }

                }

                //中间按钮
                for(var i = begin; i <= end; i++){
                    if(i === currentPage){
                        html += "<li class=\"active\"><a href=\"javascript:void(0)\" onclick='ajaxForNoattendance("+ i +")'>" + i + "</a></li>";
                    }else{
                        html += "<li><a href=\"javascript:void(0)\" onclick='ajaxForNoattendance("+ i +")'>" + i + "</a></li>";
                    }
                }

                //下一页按钮
                if(currentPage >= totalPage){
                    html += "<li>\n" +
                        "            <a href=\"#\" aria-label=\"Next\">\n" +
                        "                <span aria-hidden=\"true\">&raquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }else {
                    var nextPage = currentPage + 1;
                    html += "<li>\n" +
                        "            <a href=\"javascript:void(0)\" onclick='ajaxForNoattendance("+ nextPage +")' aria-label=\"Next\">\n" +
                        "                <span aria-hidden=\"true\">&raquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }

                $("#page_day").html(html);
            });
        }

        function ajaxForMonthList(num){
            $.get("/report/manager/getAttendanceByMonth", {month: $("#choice_month").val(), num: num}, function (PageAndList) {
                var html = "<table id=\"month_table\" class=\"table table-hover\" style=\"margin-top: 10px\">";
                html += "<tr>\n" +
                    "                            <th>#</th>\n" +
                    "                            <th>工号</th>\n" +
                    "                            <th>姓名</th>\n" +
                    "                            <th>出勤率</th>\n" +
                    "                            <th>出勤天数</th>\n" +
                    "                            <th>未出勤天数</th>\n" +
                    "                        </tr>";

                var index = 1;
                for(var item in PageAndList.list){
                    html += "<tr>\n" +
                        "                        <td>"+ index +"</td>\n" +
                        "                        <td>" + PageAndList.list[item].id +"</td>\n" +
                        "                        <td>" + PageAndList.list[item].name +"</td>\n" +
                        "                        <td>" + Number(PageAndList.list[item].attendanceRate).toFixed(2) + "</td>\n" +
                        "                        <td>" + PageAndList.list[item].attendanceDay + "</td>\n" +
                        "                        <td>" + PageAndList.list[item].absenceDay + "</td>\n" +
                        "                    </tr>";
                    index++;
                }
                html += "</table>";
                $("#month_table_div").html(html);

                //总条数
                var total = PageAndList.page.total;
                //每页显示的数量
                var size = PageAndList.page.size;
                //当前页
                var currentPage = PageAndList.page.index;
                //总页数
                var totalPage = Math.ceil(total / size);

                //拼接分页按钮的html
                //上一页按钮
                if(currentPage <= 1){
                    html = "<li>\n" +
                        "            <a href=\"#\" aria-label=\"Previous\">\n" +
                        "                <span aria-hidden=\"true\">&laquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>";
                }else{
                    var prePage = currentPage - 1;
                    html = "<li>\n" +
                        "            <a href=\"javascript:void(0)\" onclick='ajaxForMonthList("+ prePage +")' aria-label=\"Previous\">\n" +
                        "                <span aria-hidden=\"true\">&laquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }

                //中间按钮，前5后4
                //定义开始位置begin，结束位置end
                var begin;
                var end;

                //要显示10页码
                if(totalPage < 10){
                    //不够10页
                    begin = 1;
                    end = totalPage;
                }else{
                    //页码超过10页
                    begin = currentPage - 5;
                    end = currentPage + 4;

                    //补齐
                    //前面不够5个
                    if(begin < 1){
                        begin = 1;
                        end = begin + 9;
                    }
                    //后面不够4个
                    if(end > totalPage){
                        end = totalPage;
                        begin = end - 9;
                    }

                }

                //中间按钮
                for(var i = begin; i <= end; i++){
                    if(i === currentPage){
                        html += "<li class=\"active\"><a href=\"javascript:void(0)\" onclick='ajaxForMonthList("+ i +")'>" + i + "</a></li>";
                    }else{
                        html += "<li><a href=\"javascript:void(0)\" onclick='ajaxForMonthList("+ i +")'>" + i + "</a></li>";
                    }
                }

                //下一页按钮
                if(currentPage >= totalPage){
                    html += "<li>\n" +
                        "            <a href=\"#\" aria-label=\"Next\">\n" +
                        "                <span aria-hidden=\"true\">&raquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }else {
                    var nextPage = currentPage + 1;
                    html += "<li>\n" +
                        "            <a href=\"javascript:void(0)\" onclick='ajaxForMonthList("+ nextPage +")' aria-label=\"Next\">\n" +
                        "                <span aria-hidden=\"true\">&raquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }

                $("#page_month").html(html);
            });
        }

        function ajaxForLate(num){
            $.get("/report/manager/getLateByMonth", {month: $("#choice_month_2").val(), time: $("#choice_time").val(), num: num}, function (PageAndList) {
                var html = "<table id=\"month_late_table\" class=\"table table-hover\" style=\"margin-top: 10px\">";
                html += "<tr>\n" +
                    "                            <th>#</th>\n" +
                    "                            <th>工号</th>\n" +
                    "                            <th>姓名</th>\n" +
                    "                            <th>迟到次数</th>\n" +
                    "                        </tr>";

                var index = 1;
                for(var item in PageAndList.list){
                    html += "<tr>\n" +
                        "                            <td>"+ index +"</td>\n" +
                        "                            <td>"+ PageAndList.list[item].id +"</td>\n" +
                        "                            <td>"+ PageAndList.list[item].name +"</td>\n" +
                        "                            <td>"+ PageAndList.list[item].lateDay +"</td>\n" +
                        "                        </tr>";
                    index++;
                }
                html += "</table>";
                $("#month_late_table_div").html(html);

                //总条数
                var total = PageAndList.page.total;
                //每页显示的数量
                var size = PageAndList.page.size;
                //当前页
                var currentPage = PageAndList.page.index;
                //总页数
                var totalPage = Math.ceil(total / size);

                //拼接分页按钮的html
                //上一页按钮
                if(currentPage <= 1){
                    html = "<li>\n" +
                        "            <a href=\"#\" aria-label=\"Previous\">\n" +
                        "                <span aria-hidden=\"true\">&laquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>";
                }else{
                    var prePage = currentPage - 1;
                    html = "<li>\n" +
                        "            <a href=\"javascript:void(0)\" onclick='ajaxForLate("+ prePage +")' aria-label=\"Previous\">\n" +
                        "                <span aria-hidden=\"true\">&laquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }

                //中间按钮，前5后4
                //定义开始位置begin，结束位置end
                var begin;
                var end;

                //要显示10页码
                if(totalPage < 10){
                    //不够10页
                    begin = 1;
                    end = totalPage;
                }else{
                    //页码超过10页
                    begin = currentPage - 5;
                    end = currentPage + 4;

                    //补齐
                    //前面不够5个
                    if(begin < 1){
                        begin = 1;
                        end = begin + 9;
                    }
                    //后面不够4个
                    if(end > totalPage){
                        end = totalPage;
                        begin = end - 9;
                    }

                }

                //中间按钮
                for(var i = begin; i <= end; i++){
                    if(i === currentPage){
                        html += "<li class=\"active\"><a href=\"javascript:void(0)\" onclick='ajaxForLate("+ i +")'>" + i + "</a></li>";
                    }else{
                        html += "<li><a href=\"javascript:void(0)\" onclick='ajaxForLate("+ i +")'>" + i + "</a></li>";
                    }
                }

                //下一页按钮
                if(currentPage >= totalPage){
                    html += "<li>\n" +
                        "            <a href=\"#\" aria-label=\"Next\">\n" +
                        "                <span aria-hidden=\"true\">&raquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }else {
                    var nextPage = currentPage + 1;
                    html += "<li>\n" +
                        "            <a href=\"javascript:void(0)\" onclick='ajaxForLate("+ nextPage +")' aria-label=\"Next\">\n" +
                        "                <span aria-hidden=\"true\">&raquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }

                $("#page_late").html(html);
            });
        }

        function downloadImg(id){
            window.location.href = "/report/manager/downloadPic?fileName=" + id;
        }


        function ajaxForImg(num) {
            $.get("/report/manager/getAllEmployee", {num: num}, function (PageAndList) {
                var html = "<table id=\"img_table\" class=\"table table-hover\" style=\"margin-top: 10px\">";
                html += "<tr>\n" +
                    "                            <th>#</th>\n" +
                    "                            <th>预览</th>\n" +
                    "                            <th>工号</th>\n" +
                    "                            <th>姓名</th>\n" +
                    "                            <th>下载链接</th>\n" +
                    "                        </tr>";
                var index = 1;
                for(var item in PageAndList.list){
                    var img = "/report/img/employee.png";
                    if(PageAndList.list[item].img != null){
                        img = PageAndList.list[item].img;
                        html += "<tr>\n" +
                            "                            <td>"+ index +"</td>\n" +
                            "                            <td><img src=\""+ img +"\" class=\"img-thumbnail\" style=\"max-width: 50px; max-height: 50px\"></td>\n" +
                            "                            <td>"+ PageAndList.list[item].id +"</td>\n" +
                            "                            <td>"+ PageAndList.list[item].name +"</td>\n" +
                            "                            <td><a href='javascript:void(0)' onclick='downloadImg("+ PageAndList.list[item].id +")'>下载</a></td>\n" +
                            "                        </tr>";
                    }else{
                        html += "<tr>\n" +
                            "                            <td>"+ index +"</td>\n" +
                            "                            <td><img src=\""+ img +"\" class=\"img-thumbnail\" style=\"max-width: 50px; max-height: 50px\"></td>\n" +
                            "                            <td>"+ PageAndList.list[item].id +"</td>\n" +
                            "                            <td>"+ PageAndList.list[item].name +"</td>\n" +
                            "                            <td></td>\n" +
                            "                        </tr>";
                    }
                    index++;
                }
                html += "</table>";
                $("#img_table_div").html(html);

                //总条数
                var total = PageAndList.page.total;
                //每页显示的数量
                var size = PageAndList.page.size;
                //当前页
                var currentPage = PageAndList.page.index;
                //总页数
                var totalPage = Math.ceil(total / size);

                //拼接分页按钮的html
                //上一页按钮
                if(currentPage <= 1){
                    html = "<li>\n" +
                        "            <a href=\"#\" aria-label=\"Previous\">\n" +
                        "                <span aria-hidden=\"true\">&laquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>";
                }else{
                    var prePage = currentPage - 1;
                    html = "<li>\n" +
                        "            <a href=\"javascript:void(0)\" onclick='ajaxForImg("+ prePage +")' aria-label=\"Previous\">\n" +
                        "                <span aria-hidden=\"true\">&laquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }

                //中间按钮，前5后4
                //定义开始位置begin，结束位置end
                var begin;
                var end;

                //要显示10页码
                if(totalPage < 10){
                    //不够10页
                    begin = 1;
                    end = totalPage;
                }else{
                    //页码超过10页
                    begin = currentPage - 5;
                    end = currentPage + 4;

                    //补齐
                    //前面不够5个
                    if(begin < 1){
                        begin = 1;
                        end = begin + 9;
                    }
                    //后面不够4个
                    if(end > totalPage){
                        end = totalPage;
                        begin = end - 9;
                    }

                }

                //中间按钮
                for(var i = begin; i <= end; i++){
                    if(i === currentPage){
                        html += "<li class=\"active\"><a href=\"javascript:void(0)\" onclick='ajaxForImg("+ i +")'>" + i + "</a></li>";
                    }else{
                        html += "<li><a href=\"javascript:void(0)\" onclick='ajaxForImg("+ i +")'>" + i + "</a></li>";
                    }
                }

                //下一页按钮
                if(currentPage >= totalPage){
                    html += "<li>\n" +
                        "            <a href=\"#\" aria-label=\"Next\">\n" +
                        "                <span aria-hidden=\"true\">&raquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }else {
                    var nextPage = currentPage + 1;
                    html += "<li>\n" +
                        "            <a href=\"javascript:void(0)\" onclick='ajaxForImg("+ nextPage +")' aria-label=\"Next\">\n" +
                        "                <span aria-hidden=\"true\">&raquo;</span>\n" +
                        "            </a>\n" +
                        "        </li>"
                }

                $("#page_img").html(html);
            })
        }

        function downloadReportForDayList(){
            if($("#choice_date").val() != null && $("#choice_date").val() != ""){
                window.open("/report/manager/getReportForDayList?date=" + $("#choice_date").val());
            }
        }

        function downloadReportForMonthList(){
            if($("#choice_month").val() != null && $("#choice_month").val() != ""){
                window.open("/report/manager/getReportForMonth?month=" +  $("#choice_month").val());
            }
        }

        function downloadReportForLate(){
            if($("#choice_month_2").val() != null && $("#choice_month_2").val() != ""){
                window.open("/report/manager/getReportForLate?month=" + $("#choice_month_2").val() + "&time=" + $("#choice_time").val());
            }
        }

        $(function () {
            $.get("/report/manager/getId",function (id) {
                $("#id").html("欢迎你，管理员：" + id);
            });

            ajaxForImg(1);

            //按日查询出勤信息
            $("#search_attendance_byDate").click(function () {
                //alert($("#choice_date").val());
                if($("#choice_date").val() != null && $("#choice_date").val() != ""){
                    ajaxForDayList(1);
                }
            });

            //按日查询未出勤信息
            $("#search_noattendance_byDate").click(function () {
                if($("#choice_date").val() != null && $("#choice_date").val() != ""){
                    ajaxForNoattendance(1);
                }
            });

            //按月查询考勤信息
            $("#search_attendance_byMonth").click(function () {
               if($("#choice_month").val() != null && $("#choice_month").val() != ""){
                   ajaxForMonthList(1);
               }
            });

            //按月查询迟到信息
            $("#search_late_byMonth").click(function () {
               if($("#choice_month_2").val() != null && $("#choice_month_2").val() != ""){
                    ajaxForLate(1);
               }
            });

            //修改密码
            $("#modify_password").click(function () {
                if($("#oldPassword").val() != null && $("#oldPassword").val() != "" && $("#newPassword").val() != null && $("#newPassword").val() != ""){
                    $.post("/report/manager/modifyPassword", {"oldPassword": $.md5($("#oldPassword").val()), "newPassword": $.md5($("#newPassword").val())}, function (msg) {
                        if(msg === "success"){
                            $("#oldPassword").val("");
                            $("#newPassword").val("");
                            alert("修改成功！");
                        }
                    })
                }
            });
        });


        window.onload = function() {
            var aH2 = document.getElementsByTagName('h2');
            var ul = document.getElementsByClassName('left_ul');
            var aspan = document.getElementsByTagName('span');
            var drag = [];
            for (var k = 0; k < aH2.length; k++) {
                drag[k] = true;
            }
            for (var i = 0; i < aH2.length; i++) {
                aH2[i].index = i;
                aH2[i].onclick = function() {
                    if (drag[this.index]) {
                        for (var n = 0; n < ul.length; n++) {
                            ul[n].style.height = "0";
                            aH2[n].style.background = "#3889D4";
                            aspan[n].className = "";
                            drag[n] = true
                        }
                        ul[this.index].style.height = "125px";
                        this.style.background = "#393c4a";
                        aspan[this.index].className = "on";
                        drag[this.index] = false;
                    } else {
                        ul[this.index].style.height = "0";
                        this.style.background = "#3889D4";
                        aspan[this.index].className = "";
                        drag[this.index] = true;
                    }
                }
            }

            var dayCheck = document.querySelector('.dayCheck');
            var dayCheckDetails = document.querySelector('.dayCheckDetails');
            var monthCheck = document.querySelector('.monthCheck');
            var monthCheckDetails = document.querySelector('.monthCheckDetails');
            var monthLate = document.querySelector('.monthLate');
            var monthLateDetails = document.querySelector('.monthLateDetails');
            var photo = document.querySelector('.photo');
            var photoExport = document.querySelector('.photoExport');
            var pwd = document.querySelector('.pwd');
            var pwdChange = document.querySelector('.pwdChange');
            dayCheck.onclick = function() {
                dayCheckDetails.style.display = 'block';
                monthCheckDetails.style.display = 'none';
                monthLateDetails.style.display = 'none';
                photoExport.style.display = 'none';
                pwdChange.style.display = 'none';
            }
            monthCheck.onclick = function() {
                dayCheckDetails.style.display = 'none';
                monthCheckDetails.style.display = 'block';
                monthLateDetails.style.display = 'none';
                photoExport.style.display = 'none';
                pwdChange.style.display = 'none';
            }
            monthLate.onclick = function() {
                dayCheckDetails.style.display = 'none';
                monthCheckDetails.style.display = 'none';
                monthLateDetails.style.display = 'block';
                photoExport.style.display = 'none';
                pwdChange.style.display = 'none';
            }
            photo.onclick = function() {
                dayCheckDetails.style.display = 'none';
                monthCheckDetails.style.display = 'none';
                monthLateDetails.style.display = 'none';
                photoExport.style.display = 'block';
                pwdChange.style.display = 'none';
            }
            pwd.onclick = function() {
                dayCheckDetails.style.display = 'none';
                monthCheckDetails.style.display = 'none';
                monthLateDetails.style.display = 'none';
                photoExport.style.display = 'none';
                pwdChange.style.display = 'block';
            }
        }

    </script>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        height: 100%;
        /*height: auto;*/
    }

    #box {
        float: left;
        width: 20%;
        height: 100%;
        background-color: #363a45;
        color: #fff;
    }

    #box-1 {
        width: 100%;
        height: 65px;
        background-color: #44495a;
        font-size: 24px;
        color: #fff;
        text-align: center;
        line-height: 65px;
    }

    #nav {
        width: 250px;
        margin: 10px 5px 0;
    }

    #nav h2 {
        width:302px;
        background: #3889d4;
        font-size: 16px;
        height: 50px;
        line-height: 20px;
        transition: .5s;
        margin-bottom: 5px;
        cursor: pointer;
    }

    #nav h2 span {
        width: 0;
        height: 0;
        display: block;
        border: 8px solid transparent;
        border-left-color: #fff;
        position: relative;
        left: 224px;
        top: 16px;
        transform-origin: 1px 8px;
        transition: .5s;
    }

    #box-1 #nav ul {
        transition: .5s;
        overflow: hidden;
        cursor: pointer;
    }

    #box-1 #nav ul li {
        font-size: 15px;
        line-height: 40px;
        font-weight: bold;
    }

    .on {
        transform: rotate(90deg);
    }

    .content {
        float: left;
        width: 80%;
        /* height: 100%; */
        height: 100%;
        background-color: #fff;
    }

    .top {
        width: 100%;
        height: 65px;
        box-shadow: 0 1px 2px 0 rgba(40, 42, 49, .16);
    }

    .top a {
        margin: 0 20px;
        float: right;
        font-size: 20px;
        font-weight: bold;
        color: #44495a;
        text-align: center;
        line-height: 65px;
    }
    /* .common {
        height: 30px!important;
        text-align: center;
    } */

    .dayCheckDetails,
    .monthCheckDetails,
    .monthLateDetails {
        display: none;
        /*background-color: pink;*/
    }

    .photoExport {
        display: none;
        /* height: 735px; */
        /*background-color: skyblue;*/
    }

    .pwdChange {
        display: none;
        /* height: 735px; */
        /*background-color: red;*/
    }
</style>

<body>
<!-- 侧边栏开始 -->
<div id="box">
    <div id="box-1">人脸识别考勤报表系统
        <div id="nav">
            <h2><span class=""></span>员工考勤信息</h2>
            <ul class="left_ul" style="height: 0;">
                <li class="dayCheck">按日导出考勤信息</li>
                <li class="monthCheck">按月导出考勤信息</li>
                <li class="monthLate">按月导出迟到信息</li>
            </ul>
            <h2><span class=""></span>其他</h2>
            <ul class="left_ul" style="height: 0;">
                <li class="photo">导出员工证件照</li>
                <li class="pwd">修改密码</li>
            </ul>
        </div>
    </div>
</div>
<!-- 侧边栏结束 -->
<div class="content">
    <div class="top">
        <a id="logout" href="/report/login/logout" style="color: #f9321e">退出</a>
        <a id="id" href="javascript:void(0)">登录</a>
    </div>
    <!-- 请在下面对 对应模块内容修改 -->
    <div class="main">
        <div class="dayCheckDetails">
            <div style="width: 70%; height: auto; margin-left: 30px; margin-top: 30px">
                <h4>按日期导出出勤信息</h4>
                <form class="form-inline">
                    <div class="form-group">
                        <label for="choice_date">日期</label>
                        <input id="choice_date" type="date"/>
                    </div>
                    <button id="search_attendance_byDate" class="btn btn-primary" type="button" style="margin-left: 10px">查询出勤表</button>
                    <button id="search_noattendance_byDate" class="btn btn-primary" type="button" style="margin-left: 10px">查询缺勤表</button>
                    <a class="glyphicon glyphicon-download-alt" id="get_report_byDate" href="javascript:void(0)" onclick="downloadReportForDayList()" style="margin-left: 10px">导出报表</a>
                </form>
                <div id="date_table_div">
                    <!--ajax返回的json会在这里形成表格-->
                    <table id="date_table" class="table table-hover" style="margin-top: 10px">
                        <tr>
                            <th>#</th>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>出勤时间</th>
                        </tr>
                    </table>
                </div>
                <div style="float: right">
                    <nav aria-label="Page navigation">
                        <ul id="page_day" class="pagination">

                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="monthCheckDetails">
            <div style="width: 80%; height: auto; margin-left: 30px; margin-top: 30px">
                <h4>按月份导出出勤信息</h4>
                <form class="form-inline">
                    <div class="form-group">
                        <label for="choice_month">月份</label>
                        <input id="choice_month" type="month"/>
                    </div>
                    <button id="search_attendance_byMonth" class="btn btn-primary" type="button" style="margin-left: 10px">查询出勤信息</button>
                    <a class="glyphicon glyphicon-download-alt" id="get_report_byMonth" href="javascript:void(0)" onclick="downloadReportForMonthList()" style="margin-left: 10px">导出报表</a>
                </form>
                <div id="month_table_div">
                    <table id="month_table" class="table table-hover" style="margin-top: 10px">
                        <tr>
                            <th>#</th>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>出勤率</th>
                            <th>出勤天数</th>
                            <th>未出勤天数</th>
                        </tr>
                    </table>
                </div>
                <div style="float: right">
                    <nav aria-label="Page navigation">
                        <ul id="page_month" class="pagination">

                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="monthLateDetails">
            <div style="width: 80%; height: auto; margin-left: 30px; margin-top: 30px">
                <h4>按月份导出迟到信息</h4>
                <form class="form-inline">
                    <div class="form-group">
                        <label for="choice_month_2">月份</label>
                        <input id="choice_month_2" type="month"/>
                    </div>
                    <div class="form-group">
                        <label for="choice_time">指定时间</label>
                        <input id="choice_time" type="time" value="09:00"/>
                    </div>
                    <button id="search_late_byMonth" class="btn btn-primary" type="button" style="margin-left: 10px">查询迟到信息</button>
                    <a class="glyphicon glyphicon-download-alt" id="get_late_byMonth" href="javascript:void(0)" onclick="downloadReportForLate()" style="margin-left: 10px">导出报表</a>
                </form>
                <div id="month_late_table_div">
                    <table id="month_late_table" class="table table-hover" style="margin-top: 10px">
                        <tr>
                            <th>#</th>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>迟到次数</th>
                        </tr>
                    </table>
                </div>
                <div style="float: right">
                    <nav aria-label="Page navigation">
                        <ul id="page_late" class="pagination">

                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="photoExport">
            <div style="width: 80%; height: auto; margin-left: 30px; margin-top: 30px">
                <h4>导出员工照片</h4>
                <div id="img_table_div" style="margin-top: 20px">
                    <table id="img_table" class="table table-hover" style="margin-top: 10px">
                        <tr>
                            <th>#</th>
                            <th>预览</th>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>下载链接</th>
                        </tr>

                        <tr>
                            <td>1</td>
                            <td><img src="/report/img/employee.png" class="img-thumbnail" style="max-width: 50px; max-height: 50px"></td>
                            <td>1999</td>
                            <td>孔昊</td>
                            <td><a href="">123</a></td>
                        </tr>
                    </table>
                </div>
                <div style="float: right">
                    <nav aria-label="Page navigation">
                        <ul id="page_img" class="pagination">

                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="pwdChange">
            <div style="width: 80%; height: auto; margin-left: 30px; margin-top: 30px">
                <h4>修改密码</h4>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="oldPassword" class="col-sm-2 control-label">旧密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="oldPassword">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="newPassword" class="col-sm-2 control-label">新密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="newPassword">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button id="modify_password" type="button" class="btn btn-primary">修改密码</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>

</html>